<template>
  <div class="product-container">
    <div class="top">
      <input type="text" placeholder="请输入项目名字" v-model="projectName" />
      <van-dropdown-menu class="search-box">
        <van-dropdown-item v-model="state" :options="states"  @change="choose(state)"/>
      </van-dropdown-menu>
      <span @click="toPage">&#xe640;</span>
    </div>
    <div class="bottom">
    <ul @scroll="scorllEvt">
      <van-swipe-cell v-for="i in list" :key="i.id">
        <i class="icon">&#xe637;</i>
        <em class="state">{{ i.state }}</em>
        <template #right>
          <van-button square text="详情" @click="detail(i.id)" />
        </template>
        <template #left>
          <van-button square text="删除"  @click="deleteEvt(i)"  v-if="i .state==='新建' "/>
          <van-button square text="编辑"  v-if="i .state==='新建' "/>
          <van-button square text="审批" v-if="i .state==='新建'  "/>
          <van-button square text="在途"  v-if="i .state==='确认' "/>
          <van-button square text="完成"  v-if="i .state==='在途' "/>
          <van-button square text="收款"  v-if="i .state==='完成' "/>
        </template>
        <li>
          <p class="title">{{ i.projectName }}</p>

          <span>{{ i.createTime }}</span>
          <span>创建人：{{ i.createName }}</span>

          <span>创建材料：{{ i.materialName }}</span>
        </li>

      </van-swipe-cell>
      <li>
        <div v-if="loading" class="color">加载更多</div>
        <div  v-else-if="hasMore">
          <van-loading type="spinner" color="#1890ff">正在加载中...</van-loading>
        </div>
        <div v-else class="color">没有更多</div>
      </li>
     </ul>
    </div>
  </div>
</template>
<script>
import { purchaseListApi, purchaseDeleteApi } from '@/Apis/homeApi'
export default {
  name: 'index',
  data () {
    return {
      projectName: '',
      state: '',
      page: 1,
      timer: null,
      list: [],
      loading: true,
      hasMore: true,
      states: [
        { text: '全部', value: '' },
        { text: '新建', value: '新建' },
        { text: '确认', value: '确认' },
        { text: '在途', value: '在途' },
        { text: '完成', value: '完成' },
        { text: '作废', value: '作废' }
      ]
    }
  },
  created () {
    this.getList()
  },

  computed: {
    userInfo () {
      return this.$store.getters['common/userInfo']
    }
  },
  watch: {
    // 搜索项目防抖*********************************************

    projectName () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        purchaseListApi({
          projectName: this.projectName,
          state: this.state,
          page: this.page,
          size: 8
        }).then((d) => {
          this.list = d.data.rows
        })
      }, 1500)
    }
  },
  methods: {
    // 获取列表接口*******************************************************
    scorllEvt (evt) {
      // 如果没有到底部不能加载，如果正在加载中不能去加载，如果没有更多数据不能去加载

      if (this.loading) return false
      if (!this.hasMore) return false
      // 还需要在改进
      const isBottom = evt.target.scrollHeight - evt.target.clientHeight - evt.target.scrollTop < 32
      if (isBottom) {
        this.loading = true
        this.page += 1
        this.getList()
      }
    },
    async getList () {
      const res = await purchaseListApi({
        projectName: this.projectName,
        state: this.state,
        page: this.page,
        size: 8
      })
      if (res.code === 200) {
        this.list = this.page === 1 ? res.data.rows : this.list.concat(res.data.rows)
        this.hasMore = this.page * 8 < res.data.total
      }
      const that = this
      setTimeout(() => {
        that.loading = false
      })
    },
    // 页面跳转事件*******************************************************

    toPage () {
      this.$router.push('/project/edit')
    },
    detail (id) {
      this.$router.push('/product/detail/' + id)
    },
    // 删除订单事件************************************************************
    deleteEvt (data) {
      this.$dialog.confirm({
        title: '删除确认',
        message: '确认删除？'
      }).then(async () => {
        const res = await purchaseDeleteApi(data.id)
        if (res.code === 200) {
          this.$toast.success('删除成功')
          data.state = '作废'
        } else {
          this.$toast.fail('删除失败')
        }
      })
    },
    async choose (data) {
      await purchaseListApi({
        projectName: this.projectName,
        state: this.state,
        page: this.page,
        size: 8
      }).then(d => {
        if (data === '新建') {
          this.list = d.data.rows.filter(i => i.state === '新建')
        } else if (data === '确认') {
          this.list = d.data.rows.filter(i => i.state === '确认')
        } else if (data === '在途') {
          this.list = d.data.rows.filter(i => i.state === '在途')
        } else if (data === '完成') {
          this.list = d.data.rows.filter(i => i.state === '完成')
        } else if (data === '作废') {
          this.list = d.data.rows.filter(i => i.state === '作废')
        }
      })
    }
  }
}

</script>
<style lang="less" scoped>
@import "@/style/common.less";
.product-container {
  .top {
    //   position:sticky;
    // top:0;
    // left:0;
    display: flex;
    padding: 10px 0;
    height: 28px;
    > input {
      flex: 1;
      width: 0;
      height: 28px;
      border: none;
      outline: none;
      background: transparent;
      font-size: 0.75rem;
      padding: 0 12px;
      &::-webkit-input-placeholder {
        font-size: 0.65rem;
      }
    }

    span {
      font-size: 30px;
      .EDM-font;
      padding: 0 15px;
    }
  }
  .bottom{
    display:block;
    height:calc(100%-49px);
.color{
  font-size:.75rem;
  color:#1890ff;
}
  }  ul {
    list-style: none;
    display: block;
    height: 100%;
    padding: 0 10px;
    overflow-x: hidden;
    .van-swipe-cell {
      background-color: rgba(255, 255, 255, 0.5);

      .icon {
        .EDM-font;
        position: absolute;
        top: 34px;
        left: 39px;
      }
      .title {
        width: 80%;
        padding-left: 40px;
      }
      li {
        width: 100%;

        border-bottom: 1px solid @c4;

        padding: 8px 40px;
        &:last-child {
          border-bottom: none;
        }
        > span {
          display: block;
          line-height: 24px;
          font-size: 0.65rem;
          color: #ccc;
        }
      }
    }
    .van-button {
      height: 100%;
      background-color: rgba(245, 233, 233, 0.5);
      // border-bottom:1px solid @c4;
    }
    .state {
      position: absolute;
      top: 30px;
      right: 100px;
      color: @c9;
      font-size: 0.7rem;
    }
  }
}
</style>
